<!--
 * @Descripttion: 
 * @version: 
 * @Author: dudu
 * @Date: 2020-02-18 09:53:54
 * @LastEditors  : dudu
 * @LastEditTime : 2020-02-20 16:05:36
 -->
<template>
  <div class="home">
    <el-button @click="handleMergeTable">点击合并单元格</el-button>
    <br />
    {{ spanArr }}
    <div class="tableArea">
      <div>
        <el-table :data="tableData" border>
          <el-table-column
            v-for="(item, index) in tableHeaders"
            :key="index"
            :prop="item.name"
            :label="item.label"
          >
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-table
          v-if="showMergedTable"
          :data="tableData"
          border
          :span-method="objectSpanMethod"
        >
          <el-table-column
            v-for="(item, index) in tableHeaders"
            :key="index"
            :prop="item.name"
            :label="item.label"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  name: "home",
  data() {
    return {
      tableHeaders: [
        { name: "grade", label: "年级" },
        { name: "class", label: "班级" },
        { name: "group", label: "小组" },
        { name: "name", label: "姓名" }
      ],
      tableData: [
        {
          grade: "一年级",
          class: "二班",
          group: "一组",
          name: "张三",
          id: 1
        },
        {
          grade: "一年级",
          class: "三班",
          group: "二组",
          name: "王五",
          id: 2
        },
        {
          grade: "一年级",
          class: "三班",
          group: "三组",
          name: "李四",
          id: 3
        },
        {
          grade: "二年级",
          class: "一班",
          group: "三组",
          name: "小明",
          id: 4
        },
        {
          grade: "二年级",
          class: "一班",
          group: "三组",
          name: "花花",
          id: 5
        },
        {
          grade: "二年级",
          class: "二班",
          group: "二组",
          name: "田七",
          id: 6
        },
        {
          grade: "二年级",
          class: "二班",
          group: "二组",
          name: "小明",
          id: 7
        },
        {
          grade: "二年级",
          class: "二班",
          group: "三组",
          name: "花花",
          id: 8
        }
      ],
      spanArr: [], //二维数组，用于存放单元格合并规则
      position: 0, //用于存储相同项的开始index
      showMergedTable: false
    };
  },
  methods: {
    rowspan(idx, prop) {
      this.spanArr[idx] = [];
      this.position = 0;
      this.tableData.forEach((item, index) => {
        //  判断前一列同一行单元格是否合并过，合并过才可合并，首列不做判断
        let isPreMerged = false;
        if (idx) {
          isPreMerged = !this.spanArr[idx - 1][this.spanArr[idx].length];
        }
        if (index === 0) {
          this.spanArr[idx].push(1);
          this.position = 0;
        } else {
          // 纵向与上一个值相同
          const equalWithPre =
            this.tableData[index][prop] === this.tableData[index - 1][prop];
          if (idx ? equalWithPre && isPreMerged : equalWithPre) {
            this.spanArr[idx][this.position] += 1; //有相同项
            this.spanArr[idx].push(0);
          } else {
            this.spanArr[idx].push(1); //同列的前后两行单元格不相同，生成新的单元格，记录新位置
            this.position = index;
          }
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const _row = this.spanArr[columnIndex][rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        rowspan: _row,
        colspan: _col
      };
    },
    mergeTable() {
      this.tableHeaders.map((item, index) => {
        this.rowspan(index, item.name);
      });
    },
    handleMergeTable() {
      this.showMergedTable = true;
      this.mergeTable();
    }
  }
};
</script>
<style>
.tableArea {
  display: flex;
}
.tableArea > div {
  width: 400px;
}
</style>
